<template>
    <div id="detail">
        <div class="eleProduct">
            <div class="picBox">
                 <img :src="'http://localhost:3000/'+myData_curProduct.picture" alt="product"/>
            </div>
            <div class="textBox">
                <h3>{{myData_curProduct.title}}<span>{{myData_curProduct.content}}</span><span class="good">点赞</span></h3>
                <p class="price">￥{{myData_curProduct.price}}</p>
                <p class="more">
                    <span>{{myData_curProduct.author}}</span>
                    <span class="from">出自：{{myData_curProduct.from}}</span>
                    <mt-button size="small" class="addCar">加入购物车</mt-button>
                </p>
            </div>
        </div>

        <div class="comments detailComment">
            <h3 class="comTitle">来自一群傻子的评价</h3>
            <ul class="commentsList">
                <li v-for="commentItem in myData_curComments">
                    <p class="pieceComment">
                        <span>{{commentItem.name}}:</span>
                        <span>{{commentItem.words}}</span>
                    </p>
                </li>
            </ul>

        </div>
    </div>
</template>
<script>
import "./detail.css";
import {mapActions,mapGetters,mapMutations} from "vuex";
export default {
    data(){
        return{

        }
    },
    methods:{
        ...mapActions(["reqDetailProduct","reqDetailComment"]),
        ...mapMutations(["changeCurMode"])
    },
    computed:{ 
      ...mapGetters(["myData_curProduct","myData_curComments"])
    },
    created(){
        this.reqDetailProduct(this.$route.params.id);
        this.reqDetailComment(this.$route.params.id);
    },
    mounted(){
        this.changeCurMode(this.myData_curProduct.title);
    }
}
</script>